<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件传值和方法</title>
    <script src="../../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--1.父组件传值给子组件-->
        <com :parentmsg="msg"></com>

        <!--2.父组件传递方法给子组件-->
        <com @func="show"></com>


        <!--3.子组件传值给父组件，借助方法来传值-->
        <com @func1="showArgs"></com>

    </div>

    <template id="tmp">
        <div @click="childFun">
            <h4>这是子组件。{{ parentmsg }}</h4>
        </div>
    </template>
    <script>
        var com = {
            template:'#tmp',
            //1.给子组件注册一个属性，当有值传进来时，就可以使用了
            //一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来
            props:['parentmsg'],
            data(){
                return {
                    user:{id:1,age:18,name:"mercury"}
                }
            },

            //2.父组件传递方法给子组件
            methods:{
                //借助子组件中点击方法调用，在事件绑定中绑定的方法
                childFun(){
                    //调用父类无参方法
                    this.$emit('func');

                    //调用父类有参方法
                    this.$emit("func1",this.user)
                }
            }
        }

        var vue = new Vue({
            el:'#app',
            data:{
                msg:"父组件传的值"
            },
            methods:{
                show(){
                    console.log("父组件的show方法")
                },
                showArgs(args){
                    console.log("父组件的show方法,参数为：" + args)
                }
            },
            //定义私有组件
            components:{
                com
            }
        });
    </script>
</body>
</html>